What?

Fixes #23428.

When __experimentalGetPropsForEditableTreePreparation returns an object with multiple keys, the object itself is not a stable key that can be in turn returned as a key with useSelect.

In other words, this ends up being passed to useSelect, which will cause excessive rerenders:

{
  'core/format-bold': {
    somethingSelected,
    anotherThing,
  }
}

Solution: flatten the tree to:

{
  'core/format-bold.somethingSelected': somethingSelected,
  'core/format-bold.anotherThing': anotherThing,
}

So that useSelect can do its shallow equal magic.

Why?

How?

Testing Instructions

See #23428. Create a format that subscribes to the block editor store:

{
 	name: 'asblocks/caret',
 	title: 'Example',
 	tagName: 'mark',
 	className: 'caret',
 	attributes: {},
 	edit() {
 		return null;
 	},
 	__experimentalGetPropsForEditableTreePreparation( select ) {
 		select( 'core/block-editor' );
 		return {};
 	},
 	__experimentalCreatePrepareEditableTree() {
 		return ( formats ) => {
 			return formats;
 		};
 	},
 }

I wanted to add an e2e test, but it seems incredibly hard to write a test case that consistently fails in trunk. I tried to subscribe the test annotation format to the block editor store, which should cause a lot of re-renders on select, but the tests still pass.

#23428 (comment)

Screenshots or screencast